<template>
  <div class="agreement-wrap">
    <popup
      v-model="isShow"
      position="top"
      :close-on-click-overlay="false"
      :style="{ height: '100%', backgroundColor: 'transparent' }"
    >
      <div class="content">
        <div class="inner">
          <div class="head">
            <img src="../../../../assets/images/logo2.png" alt="" />
            <span> {{ index + 1 }} / {{ list.length }} </span>
          </div>
          <div class="title">
            {{ titles }}
          </div>
          <div class="scroll" ref="scroll">
            <transition name="fade">
              <component ref="agreement" :is="curComp" />
            </transition>
          </div>
        </div>
      </div>
      <div class="btns">
        <Button
          round
          type="info"
          :plain="disband"
          :disabled="disband"
          block
          @click="next"
          :loading="loading"
          loading-text=" 请稍等..."
          >我已阅读并同意<span v-if="time > 0">&nbsp;({{ time }})</span></Button
        >
      </div>
    </popup>
  </div>
</template>

<script>
import { Popup, Button } from "vant";
import modeulesMap from "./maps";
export default {
  name: "mAgreement",
  props: {
    value: {
      default: false,
    },
    list: {
      default: () => [],
    },
    interval: {
      default: 0,
    },
  },
  data() {
    return {
      index: 0,
      time: 0,
      timer: null,
      disband: false,
      title: "",
      titles: "",
      loading: false,
    };
  },
  model: {
    prop: "value",
    event: "valueChange",
  },
  watch: {
    isShow: {
      handler(val) {
        if (val) {
          setTimeout(
            () => {
              this.init();
            },
            this.interval ? 100 : 0
          );
        }
      },
      immediate: true,
    },
    index: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          this.titles = document.title =
            this.$refs.agreement?.title || this.title;
        });
      },
    },
  },
  computed: {
    curComp() {
      return modeulesMap[this.list[this.index] || ""];
    },
    isShow: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("valueChange", val);
      },
    },
  },
  mounted() {},
  components: { Popup, Button },
  methods: {
    init() {
      this.title = document.title;
      this.$nextTick(() => {
        this.loading = false;
        this.index = 0;
        this.strat();
      });
    },
    strat() {
      this.time = this.interval;
      this.disband = true;
      this.countdown();
    },
    next() {
      if (this.index < this.list.length - 1) {
        this.strat();
        this.$nextTick(() => {
          this.$refs.scroll.scrollTop = 0;
        });
        this.index++;
      } else {
        this.done();
      }
    },
    countdown() {
      if (this.time > 0) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.time--;
          this.countdown();
        }, 1e3);
      } else {
        this.disband = false;
      }
    },
    done() {
      document.title = this.title;
      this.loading = true;
      this.disband = true;
      this.$emit("done", () => {
        this.disband = false;
        this.loading = false;
        this.isShow = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding-top: 1px;
  background-color: $bgColor;
  .inner {
    margin: 24px 30px;
    margin-bottom: calc(96px + 40px + 40px + 50px);
    background-color: #fff;
    box-sizing: border-box;
    height: calc(100vh - 40px - 40px - 96px - 50px);
    padding: 40px;
    display: flex;
    flex-direction: column;
    .head {
      border-bottom: 1px solid #eee;
      padding-bottom: 30px;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      span {
        margin-left: auto;
        font-size: 24px;
        opacity: 0.6;
      }
      img {
        width: 250px;
      }
    }
    .title {
      margin-bottom: 48px;
      color: #181818;
      font-size: 36px;
      text-align: center;
      font-weight: 500;
    }
    .scroll {
      flex: 1;
      overflow: auto;
    }
  }
}
.btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  .van-button {
    margin: 40px auto;
    width: 690px;
    height: 96px;
    font-size: 32px;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
